<template>
  <div class="tree-scroll" v-init-screen-h="10">
    <el-row class="infinite-list-item">
      <el-input
        class="searchInput"
        size="mini"
        placeholder="请输入"
        v-model="filterText"
        suffix-icon="el-icon-search"
      >
      </el-input>

      <el-tree
        class="flow-tree"
        :data="treeEdgeData"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        ref="tree"
        @node-contextmenu="rightClick"
        :render-content="renderContent"
      />
    </el-row>

    <div
      id="menu"
      v-show="menuVisible"
      @mouseleave="menuVisible = !menuVisible"
    >
      <div class="menu_list">
        <div class="menu_item_text">
          <el-link icon="el-icon-plus" @click="createrFile" :underline="false"
            >新建</el-link
          >
        </div>
        <div class="menu_item_text">
          <el-link
            icon="el-icon-folder-opened"
            :underline="false"
            @click="openFile"
            >打开</el-link
          >
        </div>
        <div class="menu_item_text">
          <el-link @click="save" icon="el-icon-success" :underline="false"
            >保存</el-link
          >
        </div>
        <div class="menu_item_text">
          <el-link
            @click="closeFile"
            icon="el-icon-remove-outline"
            :underline="false"
            >关闭</el-link
          >
        </div>
        <div class="menu_item_text">
          <el-link @click="deleteSiddi" icon="el-icon-delete" :underline="false"
            >删除</el-link
          >
        </div>
        <div class="menu_item_text">
          <el-link icon="el-icon-download" :underline="false">下载</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  props: {
    browerHeight: {
      type: Number
    }
  },
  data() {
    return {
      treeClickCount: 0,
      menuVisible: false,
      filterText: "",
      treeNode: {
        nodeId: 0,
        nodeName: "",
        parentId: 0
      },
      // treeList:[],
      treeListData: [], // 无层级结构节点数据
      defaultProps: {
        children: "children",
        label: "siddhiAppName"
        /* label: 'categoryName'*/
      },
      nodeData: null,
      app: this.$store.getters.app
    };
  },
  computed: {
    ...mapGetters(["treeEdgeData"])
    // treeList() {
    //   console.log(this.treeEdgeData);
    //   return this.treeEdgeData;
    // },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.renderContent();
  },
  methods: {
    renderContent(h, { node, data, store }) {
      //console.log('//data', data);
      if (data.mode == "0") {
        return (
          <span>
            <svg-icon
              icon-class="folder"
              style="font-size: 12px;margin-right: 5px;margin-bottom: 1px;"
            />
            <span style="font-size:12px;color: #333333;line-height: 22px;">
              {data.siddhiAppName}
            </span>
          </span>
        );
      } else {
        return (
          <span>
            <svg-icon
              icon-class="file"
              style="font-size: 12px;margin-right: 5px;margin-bottom: 1px;"
            />
            <span style="font-size:12px;color: #333333;line-height: 22px;">
              {data.siddhiAppName}
            </span>
          </span>
        );
      }
      // if (data.mode == "STOP" || data.mode == "FAULTY") {

      // }
    },
    rightClick(MouseEvent, object, Node, element) {
      this.nodeData = Node;
      this.menuVisible = true;
      let menu = document.querySelector("#menu");
      menu.style.cssText = "position: fixed;  z-index: 999; cursor:pointer;";
      //menu.style.display = "block";
      menu.style.left = MouseEvent.clientX + "px";

      if (MouseEvent.clientY >= this.browerHeight) {
        menu.style.top =
          MouseEvent.clientY -
          120 -
          (MouseEvent.clientY - this.browerHeight) +
          "px";
      } else {
        menu.style.top = MouseEvent.clientY - 60 + "px";
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.siddhiAppName.indexOf(value) !== -1;
    },
    workspaceTree: function() {
      this.app.workspaceManager.loadWorkspaceTree();
    },
    // 点击节点名称触发的事件
    handleNodeClick: function(data) {
      this.treeNode.nodeName = data.siddhiAppName;
      // data为被点击节点数据
      // 记录点树节点击次数
      this.treeClickCount++;
      if (this.treeClickCount > 2) return;
      setTimeout(() => {
        if (this.treeClickCount == 1) {
          // 进行单击事件处理
          console.log("单击事件", data);
        } else if (this.treeClickCount == 2) {
          // 进行双击事件处理
          console.log("双击事件", data);
          this.openFile();
        }
        this.treeClickCount = 0;
      }, 500);
    },
    // 获得选中的节点的key
    checkedKeys: function(data) {
      alert(JSON.stringify(this.$refs.tree.getCheckedKeys()));
    },
    createrFile() {
      this.$emit("createrFile");
    },
    closeFile() {
      this.$emit("closeFile", this.nodeData.data.siddhiAppName);
    },
    save() {
      this.$emit("openTab_File", this.nodeData.data.siddhiAppName);
      this.$emit("save");
    },
    openFile() {
      this.$emit(
        "openTab_File",
        this.treeNode.nodeName == ""
          ? this.nodeData.data.siddhiAppName
          : this.treeNode.nodeName
      );
    },
    deleteSiddi() {
      this.$emit(
        "deleteSiddi",
        this.treeNode.nodeName == ""
          ? this.nodeData.data.siddhiAppName
          : this.treeNode.nodeName
      );
    }
  },
  mounted() {
    this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
    // this.workspaceTree();
  }
};
</script>

<style scoped lang="scss">
.tree-scroll {
  width: 100%;
  /* border:1px solid #E7E7E7; */
  height: 100%;
}
.searchInput {
  /* margin-left: 17px; */
  /* width: 228px; */
  /* max-width: 228px; */
  /* width: auto; */
  width: 100%;
}
.menu_list {
  background-color: #fff;
  border-radius: 6px;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 10%); */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  padding: 10px 15px;
  .menu_item_text {
    margin-bottom: 10px;
  }
}
.flow-tree {
  overflow: auto;
  margin: 10px;
  width: 100%;
  /* padding-bottom: 100px; */
  margin-left: 0;
  /* height: 420px; */
  // height: calc(100vh - 180px) !important;
  >>> .el-tree-node {
    > .el-tree-node__children {
      overflow: visible !important;
    }
  }
}

.menu_item {
  line-height: 20px;
  text-align: center;
  border-bottom: 1px solid #999999;
}
</style>
